<template>
    <div class='fxn-body fxn-detail'>
        <el-page-header @back="handlePath(1)">
            <template #content>
            <span class="text-large font-600 mr-3"> {{backTitle}} </span>
            </template>
        </el-page-header>
        <!-- Back Header End -->
        <div class="fxn-detail-user fxn-margin-t-20">
            <div class="title">{{detailData.name}}</div>
            <div class="status">
                <div class="item">跟进阶段：<span class="fxn-text-red">{{$filter.followStage(detailData.follow_stage)}}</span></div>
                <div class="item">案由：<span>{{$filter.businessType(detailData.business_type)}}</span></div>
                <div class="item">更新时间：<span>{{$filter.dateTime(detailData.update_time,1)}}</span></div>
            </div>
            <div class="button">
                <el-button v-if="authMenu('sys_customer_detail_follow')" type="primary" plain icon="Edit" @click="handleEditFollow">修改跟进人</el-button>
                <el-button v-if="authMenu('sys_customer_detail_contact_add')" type="primary" plain icon="User" @click="handleAddContact(1)">添加联系人</el-button>
                <el-button v-if="authMenu('sys_customer_detail_follow_add')" type="primary" plain icon="Memo" @click="handleLogs(1)">添加跟进</el-button>
                <el-dropdown v-if="authMenu('sys_customer_detail_nonlit') || authMenu('sys_customer_detail_lit') || authMenu('sys_customer_detail_criminal')" style="margin: 1px 0 0 12px;">
                    <el-button type="primary" plain icon="FolderAdd">创建案件</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-if="authMenu('sys_customer_detail_nonlit')" @click="handlePath('type_nonlawsuit')">非诉案件</el-dropdown-item>
                            <el-dropdown-item v-if="authMenu('sys_customer_detail_lit')" @click="handlePath('type_penal')">刑事案件</el-dropdown-item>
                            <el-dropdown-item v-if="authMenu('sys_customer_detail_criminal')" @click="handlePath('type_lawsuit')">诉讼案件</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                
            </div>
        </div>
        <!-- User End -->
        <div class="fxn-detail-wrap">
            <div class="fxn-tabs">
                <el-tabs v-model="wrapValue">
                    <el-tab-pane label="基本资料" :name="1"></el-tab-pane>
                    <el-tab-pane label="跟进日志" :name="2"></el-tab-pane>
                </el-tabs>
            </div>
            <!-- Tabs End -->
            <div v-if="wrapValue == 1" class="fxn-detail-info">
                <div class="info-title">
                    <div class="title">基本资料</div>
                    <div class="btn" v-if="authMenu('sys_customer_detail_edit')">
                        <el-button type="primary" plain icon="Edit" @click="handleOp">修改</el-button>
                    </div>
                </div>
                <div class="info-wrap">
                    <el-descriptions :column="3" border>
                        <el-descriptions-item label="客户名称">{{detailData.name}}</el-descriptions-item>
                        <el-descriptions-item label="跟进阶段">{{$filter.followStage(detailData.follow_stage)}}</el-descriptions-item>
                        <el-descriptions-item label="案由">{{$filter.businessType(detailData.business_type)}}</el-descriptions-item>
                        <el-descriptions-item label="信息来源">{{$filter.infoSource(detailData.info_source)}}</el-descriptions-item>
                        <el-descriptions-item label="跟进人">{{detailData.follow_with}}</el-descriptions-item>
                        <el-descriptions-item label="创建人">{{detailData.create_with}}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{$filter.dateTime(detailData.create_time,1)}}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{$filter.dateTime(detailData.update_time,1)}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="info-des" :column="1" border>
                        <el-descriptions-item label="案件情况">{{detailData.info}}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{detailData.remark}}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <!-- 基本资料 End -->
                <div class="info-title">
                    <div class="title">联系人信息</div>                    
                </div>
                <div class="info-wrap">
                    <el-table v-loading="loading" :data="contactData" border>
                        <el-table-column label="联系人" prop="name" />
                        <el-table-column label="手机号码" prop="phone" />
                        <el-table-column label="关系" prop="relation" />
                        <el-table-column label="创建时间" prop="create_time">
                            <template #default="scope">
                                {{$filter.dateTime(scope.row.create_time,1)}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template #default="scope">
                                <el-link v-if="authMenu('sys_customer_detail_contact_edit')" type="primary" :underline="false" @click="handleAddContact(2,scope.row)">修改</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 联系人信息 End -->
            </div>
            <!-- Info End -->
            <div v-if="wrapValue == 2" class="fxn-detail-info">
                <div class="info-title">
                    <div class="title">跟进日志</div>
                </div>
                <div class="info-wrap">
                    <el-table v-loading="loading" :data="listData" border>
                        <el-table-column label="跟进人" prop="create_with" width="120" />
                        <el-table-column label="跟进方式" prop="follow_method" width="120">
                            <template #default="scope">
                                {{$filter.followMethod(scope.row.follow_method)}}
                            </template>
                        </el-table-column>
                        <el-table-column label="跟进阶段" prop="follow_stage" width="120">
                            <template #default="scope">
                                {{$filter.followStage(scope.row.follow_stage)}}
                            </template>
                        </el-table-column>
                        <el-table-column label="跟进内容" prop="content" />
                        <el-table-column label="创建时间" prop="create_time" width="180">
                            <template #default="scope">
                                {{$filter.dateTime(scope.row.create_time,1)}}
                            </template>
                        </el-table-column>
                        <el-table-column label="附件" width="180">
                            <template #default="scope">
                                <i class="iconfont iconpdf"></i>
                                <span v-for="(item,index) in arrFiles(scope.row.files)">
                                    <!-- <span style="margin-right: 8px" v-if="formatFiles(item) == 'jpg' || formatFiles(item) == 'png'">
                                        <img style="width: 18px;height: 18px" :src="PathUrl + item" alt="" @click="handleFile(PathUrl + item)">
                                    </span> -->
                                    <i v-if="formatFiles(item) == 'jpg' || formatFiles(item) == 'png'" class="iconfont icon-picture fxn-ft-24" @click="handleFile(PathUrl + item)"></i>
                                    <i v-if="formatFiles(item) == 'pdf'" class="iconfont icon-pdf fxn-ft-24" @click="handleFile(PathUrl + item)"></i>
                                    <i v-if="formatFiles(item) == 'docx' || formatFiles(item) == 'xlsx' || formatFiles(item) == 'pptx'" class="iconfont icon-document fxn-ft-24" @click="handleFile(PathUrl + item)"></i>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- Page End -->
                    <div class="fxn-page">
                        <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                    <!-- Page End -->
                </div>
            </div>
            <!-- Follow End -->
        </div>
        <!-- Wrap End -->

        <!-- 修改客户信息 -->
        <dialogForm ref="dialogData" :formData="formData" @handleDialog="handleDialog"></dialogForm>
        <!-- 修改客户信息 End -->

        <!-- 修改跟进人 -->
        <dialogForm ref="dialogFollow" :formData="formFollow" @handleDialog="handleSubFollow"></dialogForm>
        <!-- 修改跟进人 End -->

        <!-- 修改联系人 -->
        <dialogForm ref="dialogContact" :formData="formContact" @handleDialog="handleContact"></dialogForm>
        <!-- 修改联系人 End -->

        <!-- 添加跟进 -->
        <noteForm v-model:logDialog="logDialog" :staticData="staticData" @handleDialog="handleLogSubmit"></noteForm>
        <!-- 添加跟进 End -->
    </div>
</template>

<script>
    import dialogForm from '../Common/Form.vue'
    import noteForm from './Common/noteForm.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {dialogForm,noteForm},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                backTitle: '客户列表',
                //Tabs
                wrapValue: 1,
                detailData: {},
                contactData: [],

                //列表
                loading: false,
                count: 0,
                page: 1,
                perPage: 10,
                listData: [],

                //修改客户信息
                formData: {
                    inline: false,
                    width: '800',
                    labelWidth: '120',
                    data: [
                        {formType: 'input', span: 12, label: '客户名称', prop: 'name', rules: [{ required: true, message: '请输入客户名称', trigger: 'blur' }], placeholder: '请输入客户名称'},
                        {formType: 'input', span: 12, label: '手机号码', prop: 'phone', maxlength: '11', rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }], placeholder: '请输入手机号码'},
                        {formType: 'select', span: 12, label: '跟进阶段', prop: 'follow_stage', data: computed(() => store.state.configEnable.follow_stage), rules: [{ required: true, message: '请选择跟进阶段', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '案由', prop: 'business_type', data: computed(() => store.state.configEnable.business_type), rules: [{ required: true, message: '请选择案由', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '信息来源', prop: 'info_source', data: computed(() => store.state.configEnable.info_source), rules: [{ required: true, message: '请选择信息来源', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '跟进人', prop: 'follow_id', data: computed(() => store.state.userData), rules: [{ required: true, message: '请选择跟进人', trigger: 'blur' }], multiple: true, tags: true, selectlabel: 'real_name', selectvalue: 'id', placeholder: '请选择'},
                        {formType: 'input', type: 'textarea', rows: 5, label: '案件情况', prop: 'info', placeholder: '请输入案件情况'},
                        {formType: 'input', type: 'textarea', rows: 5, label: '备注', prop: 'remark', placeholder: '请输入备注'},
                    ]
                },

                //修改跟进人
                formFollow: {
                    inline: false,
                    width: '600',
                    labelWidth: '120',
                    data: [
                        {formType: 'select', label: '跟进人', prop: 'follow_id', data: computed(() => store.state.userData), rules: [{ required: true, message: '请选择跟进人', trigger: 'blur' }], multiple: true, tags: true, selectlabel: 'real_name', selectvalue: 'id', placeholder: '请选择'},
                    ]
                },

                //修改联系人
                contactType: 1,
                formContact: {
                    inline: false,
                    title: '修改联系人',
                    width: '600',
                    labelWidth: '120',
                    data: [
                        {formType: 'select', label: '关系', prop: 'relation', data: computed(() => store.state.configEnable.contact_relation), rules: [{ required: true, message: '请选择关系', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'value', placeholder: '请选择'},
                        {formType: 'input', label: '联系人', prop: 'name', rules: [{ required: true, message: '请输入联系人', trigger: 'blur' }], placeholder: '请输入联系人'},
                        {formType: 'input', label: '手机号码', prop: 'phone', maxlength: '11', rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }], placeholder: '请输入手机号码'},
                    ]
                },

                //操作跟进
                logDialog: false,
                staticData: {
                    title: '添加跟进',
                    width: 800,
                    customer_id: '',
                },
            })

            //获取客户详情
            const getDetail = () => {
                state.loading = true;
                proxy.$http.get('/oa/Customer/info',{
                    id: router.currentRoute.value.query.id
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.detailData = data.info;
                        state.contactData = data.contacts;

                        //修改客户信息
                        let info = data.info;
                        if(info.follow_id){
                            info.follow_id = (info.follow_id).split(',').map(Number);
                        }
                        state.formFollow = {
                            ...state.formFollow,
                            title: '修改跟进人',
                            model: info
                        }
                        state.formData = {
                            ...state.formData,
                            title: '修改客户信息',
                            model: info
                        }
                    }
                })
            }

            //获取跟进日志
            const getNote = () => {
                state.loading = true;
                proxy.$http.get('/oa/Customer/notes',{
                    page: state.page,
                    perPage: state.perPage,
                    customer_id: router.currentRoute.value.query.id
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //修改客户信息
            const handleOp = () =>{
                let array = state.formData.data;
                array.forEach((item)=> {
                    if(item.prop == 'name'){
                        item.disabled = true
                    }
                    if(item.prop == 'phone'){
                        item.disabled = true
                    }
                    if(item.prop == 'follow_stage'){
                        item.disabled = true
                    }
                })
                state.formData.data = array;
                proxy.$refs.dialogData.openDialog();
            }

            //提交客户信息
            const handleDialog = (e) => {
                proxy.$http.post('/oa/Customer/cusForm', {
                    id: e.id,
                    name: e.name,
                    phone: e.phone,
                    follow_stage: e.follow_stage,
                    business_type: e.business_type,
                    info_source: e.info_source,
                    info: e.info,
                    remark: e.remark,
                    follow_id: String(e.follow_id),
                })
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        window.location.reload();
                        getDetail();
                    }
                })
            }

            //修改跟进人
            const handleEditFollow = () => {
                proxy.$refs.dialogFollow.openDialog();
            }

            //提交修改跟进人
            const handleSubFollow = (e) => {
                proxy.$http.post('/oa/Customer/cusForm', {
                    id: e.id,
                    name: e.name,
                    phone: e.phone,
                    follow_stage: e.follow_stage,
                    business_type: e.business_type,
                    info_source: e.info_source,
                    follow_id: String(e.follow_id),
                })
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        window.location.reload();
                        getDetail();
                    }
                })
            }

            //修改联系人
            const handleAddContact = (type,row) => {
                state.contactType = type;
                if(type == 1){                    
                    state.formContact = {
                        ...state.formContact,
                        title: '添加联系人',
                    }
                }else{
                    proxy.$http.get('/oa/Customer/contactForm',{id: row.id})
                    .then(res=> {
                        const { code, msg ,data } = res;
                        if(code != 1){
                            return proxy.$msg.error(msg);
                        }else{
                            state.formContact = {
                                ...state.formContact,
                                title: '编辑联系人',
                                model: data
                            }
                        }
                    })
                }
                proxy.$refs.dialogContact.openDialog();
            }

            //提交修改联系人
            const handleContact = (e) => {
                let form = {
                    customer_id: router.currentRoute.value.query.id,
                    relation: e.relation,
                    name: e.name,
                    phone: e.phone,
                }
                if(state.contactType == 2){
                    form.id = e.id;
                    form.customer_id = e.customer_id;
                }
                proxy.$http.post('/oa/Customer/contactForm', form)
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        getDetail();
                    }
                })
            }

            //操作跟进
            const handleLogs = () => {
                state.logDialog = true;
                state.staticData.customer_id = router.currentRoute.value.query.id;
            }

            //提交跟进
            const handleLogSubmit = () => {
                getNote();
            }

            //返回客户列表
            const handlePath = (type) => {
                if(type == 1){
                    router.push({path: router.currentRoute.value.query.path, query: {id: router.currentRoute.value.query.case_id, type: router.currentRoute.value.query.type}});
                }else{
                    let pathUrl = router.currentRoute.value.path;
                    router.push({path: '/CreateCase', query: {path: pathUrl.split('/').join(''), type: type, id: router.currentRoute.value.query.id}});
                }
            }

            //打开附件
            const handleFile = (file) => {
                window.open(file);
            }

            //转换附件为数据
            const arrFiles = (item) => {
                if(item){
                    return item.split(',');
                }
            }

            //获取附件格式
            const formatFiles = (item) => {
                var index = item.lastIndexOf("\.");
                item = item.substring(index+1,item.length);
                return item;
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getDetail();
                getNote();

                if(router.currentRoute.value.query.path == '/Customer'){
                    state.backTitle = '客户列表';
                }else{
                    state.backTitle = '案件详情';
                }
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getDetail,
                getNote,
                handleOp,
                handleDialog,
                handleEditFollow,
                handleSubFollow,
                handleAddContact,
                handleContact,
                handleLogs,
                handleLogSubmit,
                handleFile,

                //组件方法
                authMenu,
                handlePath,
                arrFiles,
                formatFiles,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    .fxn-detail{
        margin-right: 20px;
    }

    .fxn-detail-user{
        padding: 40px;
        background: #FFFFFF;
    }

    .fxn-detail-user .title{
        font-size: 24px;
        overflow: hidden;
    }

    .fxn-detail-user .status{
        margin: 20px 0;
        color: #999999;
        overflow: hidden;
    }

    .fxn-detail-user .status .item{
        margin-right: 20px;
        display: inline-block;
    }

    .fxn-detail-user .status .item span{
        color: rgba(46, 60, 179, .9);
    }

    .fxn-detail-user .button{
        overflow: hidden;
    }

    .fxn-detail-wrap{
        margin: 20px 0;
        padding: 40px;
        background: #FFFFFF;
    }

    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }
    
</style>